<template>
    <div class="top">
        <p>
            <img src="../../../assets/user.png">
            <span>您好,</span>
            <span id="name" v-text="name"/>
            <span id="info" v-if="isLogin && $vals.role === 'teacher'" @click="$router.push('/teacher')" >个人中心</span>
            <span id="login-or-logout" @click="isLogin ? $reLogin() : login()"
                  v-text="isLogin? '退出登录' : '登录账号'"/>
        </p>
        <div class="logo">
            <img src="../../../assets/ctgu-library-logo.png" >
        </div>
    </div>
</template>

<script>
    export default {
        props: {
        },
        data() {
            return {
            };
        },
        methods:{
            login() {
                this.$router.push("/login");
            },
        },
        computed:{
            isLogin(){
                return  this.$vals.username !== '';
            },
            name(){
                return this.$vals.username === '' ? '读者！' : this.$vals.name;
            }
        }
    };
</script>
<style scoped lang="scss">
    @import "top";
</style>
